<template>
    <div class="add_edit demand">
        <div class="add_field">
            <div class="field_list basic_info">
                <div class="title">
                    <span class="search_text">点播标题：</span>
                    <span>{{edit_demand_title}}</span>
                </div>
                <div class="duration">
                    <span class="search_text">视频时长：</span>
                    <span>{{edit_video_duration}}</span>
                </div>
            </div>
            <div class="field_list product_info">
                <div class="project">
                    <span class="search_text">项目：</span>
                    <el-select v-model="edit_project" multiple filterable collapse-tags placeholder="请选择项目">
                        <el-option
                            v-for="item in project_list"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="field_list desc">
                <span class="search_text">描述：</span>
                <el-input
                    type="textarea"
                    placeholder="请输入点播介绍，限200个汉字"
                    v-model="edit_remark"
                    maxlength="200"
                    show-word-limit>
                </el-input>
            </div>
        </div>
        <div class="image">
            <div class="questionnaire_image">
                <span class="search_text">大图：</span>
                <img class="promit" src="../../assets/common/promit.svg" alt="">
                <span class="upload_promit">请上传 750 x 422 大小的引导页图片，不超过2M，支持jpg、jpeg、png格式。</span>
                <el-form :model="dataForm" ref="dataForm">
                    <el-form-item :class="{hide:hideBigUpload}">
                        <el-upload 
                            ref="upload" 
                            action="#" 
                            :file-list="dataForm.bigImgFileList"
                            list-type="picture-card"
                            :on-change="OnChangeBigImg"
                            :on-preview="handleBigImg"
                            :on-exceed="handleExceedBigImg"
                            :on-remove="handleRemoveBigImg"
                            accept="image/jpeg,image/png,image/jpg," 
                            :auto-upload="false"
                            :limit="1">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisibleBigImg" append-to-body>
                            <img width="100%" :src="dialogBigImageUrl" alt="">
                        </el-dialog>
                    </el-form-item>
                </el-form>
            </div>
            <div class="questionnaire_thumb_image">
                <span class="search_text">缩略图：</span>
                <img src="../../assets/common/promit.svg" alt="">
                <span class="upload_promit">请上传 200 x 150 大小的图片用于列表显示，不超过512K，支持jpg、jpeg、png格式。</span>
                <el-form :model="dataForm" ref="dataForm">
                    <el-form-item :class="{hide:hideThumbUpload}">
                        <el-upload 
                            ref="upload" 
                            action="#" 
                            :file-list="dataForm.thumbImgFileList"
                            list-type="picture-card"
                            :on-change="OnChangeThumbImg"
                            :on-preview="handleThumbImg"
                            :on-exceed="handleExceedThumbImg"
                            :on-remove="handleRemoveThumbImg"
                            accept="image/jpeg,image/png,image/jpg," 
                            :auto-upload="false"
                            :limit="1">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisibleThumbImg" append-to-body>
                            <img width="100%" :src="dialogThumbImageUrl" alt="">
                        </el-dialog>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div  class="submit_btn">
            <el-button @click="cancel_save_data">取消</el-button>
            <el-button type="primary" @click="edit_demand_info">确定</el-button>
        </div>
        <el-dialog
            title="提示"
            :visible.sync="dialogVisibleSave"
            width="420px"
            class="save"
            :close-on-click-modal="false">
            <span>{{save_promit_title}}</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisibleSave = false">确定</el-button>
            </span>
        </el-dialog>
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="420px"
            class="cancel_save"
            :close-on-click-modal="false">
            <span>现在取消内容将不会被保存，确定取消吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelEditDialog">确定</el-button>
                <el-button type="primary" @click="dialogVisible = false">返回</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import { api, baseAjax } from '@/api/api';
    import {statusCode} from '../../utils/index';
    import {httpFormUpload} from '../../api/http';
    import Cookies from 'js-cookie';
    export default {
        name: "editDemandManagement",
        data() {
            return {
                dialogVisible:false,
                dialogVisibleSave:false,
                save_promit_title:'',
                project_list:[],   //项目下拉框值
                edit_demand_id:null,   //编辑id
                edit_demand_title:'',   //编辑标题
                edit_video_duration:'',   //编辑视频时长
                edit_project:[],   //编辑项目
                edit_remark:'',   //编辑描述
                dataForm:{
                    bigImgFileList:[],
                    thumbImgFileList:[]
                },
                dialogVisibleBigImg:false,   //是否查看大图
                dialogBigImageUrl:'',   //查看大图url
                hideBigUpload:false,
                dialogVisibleThumbImg:false,   //是否查看缩略图
                dialogThumbImageUrl:'',   //查看缩略图url
                hideThumbUpload:false,
                user_info:{}
            }
        },
        mounted(){
            this.user_info = JSON.parse(this.EncryUtil.decryptByAES(Cookies.get('user_info')));
            this.getProductList(); //获取产品
            this.get_edit_info();//获取点播信息
        },
        methods: {
            //获取所有产品
            getProductList(){
                let that = this;
                baseAjax(api.get_all_product, '', (res)=>{
                    if(res.code === statusCode.success){
                        that.project_list = res.data;
                    }
                });
            },
            //显示取消弹框
            cancel_save_data(){
                if(this.edit_remark || this.edit_project.length != 0 || this.dataForm.bigImgFileList.length != 0 || this.dataForm.thumbImgFileList.length != 0){
                    this.dialogVisible = true;
                }else{
                    this.$router.go(-1);
                }
            },
            //取消编辑弹框
            cancelEditDialog(){
                this.dialogVisible = false;
                this.$router.go(-1);
                this.edit_demand_id = null;
                this.edit_demand_title = '';
                this.edit_video_duration = '';
                this.edit_project = [];
                this.edit_remark = '';
                this.dataForm.bigImgFileList = [];
                this.dataForm.thumbImgFileList = [];
                this.dialogVisibleBigImg = false;
                this.dialogBigImageUrl = '';
                this.hideBigUpload = false;
                this.dialogVisibleThumbImg = false;
                this.dialogThumbImageUrl = '';
                this.hideThumbUpload = false;
            },
            //编辑点播信息
            edit_demand_info(){
                let that = this;
                let product_list = [];
                this.edit_project.forEach(item=>{
                    that.project_list.forEach(val=>{
                        if(item == val.id){
                            product_list.push({
                                id:val.id,
                                name:val.name
                            });
                        }
                    });
                });
                let obj = {
                    id:this.edit_demand_id,
                    descVr:this.edit_remark,
                    productList:product_list
                };
                
                //编辑图片-不修改原图
                if(this.dataForm.bigImgFileList.length == 1 && this.dataForm.bigImgFileList[0].status == 'success'){
                    obj.guideImg = this.dataForm.bigImgFileList[0].url;
                }
                if(this.dataForm.thumbImgFileList.length == 1 && this.dataForm.thumbImgFileList[0].status == 'success'){
                    obj.thumbnailImg = this.dataForm.thumbImgFileList[0].url;
                }

                //编辑图片-新增图片
                let formData = new FormData();
                if(this.dataForm.bigImgFileList.length == 1 && this.dataForm.bigImgFileList[0].status == 'ready'){
                    formData.append('guideImg', this.dataForm.bigImgFileList[0].raw);
                }
                if(this.dataForm.thumbImgFileList.length == 1 && this.dataForm.thumbImgFileList[0].status == 'ready'){
                    formData.append('thumbnailImg', this.dataForm.thumbImgFileList[0].raw);
                }

                let data = {
                    liveVideoDemandParam:JSON.stringify(obj).replace('[', '%5B').replace(']', '%5D')
                };
                httpFormUpload(api.edit_demand_info_url, data, formData, (res)=>{
                    if(res.data.code === statusCode.success){
                        if(res.data.data == true){
                            that.$router.go(-1);
                            that.$message.success('保存成功');
                        }else{
                            that.$message.error('保存失败');
                        }
                        that.edit_demand_id = null;
                        that.edit_demand_title = '';
                        that.edit_video_duration = '';
                        that.edit_project = [];
                        that.edit_remark = '';
                        that.dataForm.bigImgFileList = [];
                        that.dataForm.thumbImgFileList = [];
                        that.dialogVisibleBigImg = false;
                        that.dialogBigImageUrl = '';
                        that.hideBigUpload = false;
                        that.dialogVisibleThumbImg = false;
                        that.dialogThumbImageUrl = '';
                        that.hideThumbUpload = false;
                    }
                });
            },
            //获取编辑信息
            get_edit_info(){
                let demand_info = JSON.parse(this.EncryUtil.decryptByAES(Cookies.get('demand_info')));
                let productId = [];
                if(demand_info.productId && demand_info.productId.length){
                    demand_info.productId.forEach(item=>{
                        productId.push(Number(item));
                    });
                }
                this.edit_demand_id = demand_info.id;
                this.edit_demand_title = demand_info.title;
                this.edit_video_duration = demand_info.duration;
                this.edit_project = productId;
                this.edit_remark = demand_info.descVr;
                if(demand_info.guideImg){
                    this.dataForm.bigImgFileList.push({
                        url:demand_info.guideImg.replace('["', '').replace('"]', '')
                    });
                }
                if(demand_info.thumbnailImg){
                    this.dataForm.thumbImgFileList.push({
                        url:demand_info.thumbnailImg.replace('["', '').replace('"]', '')
                    });
                }
            },
            //大图上传验证
            OnChangeBigImg(file, fileList){
                let isType = false;
                if(file.raw.type === 'image/jpeg'){
                    isType = true;
                }else if(file.raw.type === 'image/jpg'){
                    isType = true;
                }else if(file.raw.type === 'image/png'){
                    isType = true;
                }
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (isType != true) {
                    this.dialogVisibleSave = true;
                    this.save_promit_title = '上传的大图只能是 JPG、jpeg、png 格式!';
                    fileList.pop();
                }else if (!isLt2M) {
                    this.dialogVisibleSave = true;
                    this.save_promit_title = '上传的大图大小不能超过 2M!';
                    fileList.pop();
                } else {
                    this.dataForm.bigImgFileList.push(file);
                }
                this.hideBigUpload = fileList.length == 1;
            },
            //查看图片
            handleBigImg(file){
                this.dialogVisibleBigImg = true;
                this.dialogBigImageUrl = file.url;
            },
            //限制大图数量提示
            handleExceedBigImg(){
                this.dialogVisibleSave = true;
                this.save_promit_title = '只能选择1张大图';
            },
            //删除大图
            handleRemoveBigImg(){
                this.dataForm.bigImgFileList = [];
                this.dialogVisibleBigImg = false;
                this.dialogBigImageUrl = '';
                this.hideBigUpload = false;
            },
            //缩略图上传验证
            OnChangeThumbImg(file, fileList) {
                let isType = false;
                if(file.raw.type === 'image/jpeg'){
                    isType = true;
                }else if(file.raw.type === 'image/jpg'){
                    isType = true;
                }else if(file.raw.type === 'image/png'){
                    isType = true;
                }
                const isLt5 = file.size / 1024 < 512;
                if (isType != true) {
                    this.dialogVisibleSave = true;
                    this.save_promit_title = '上传的缩略图只能是 JPG、jpeg、png 格式!';
                    fileList.pop();
                }else if (!isLt5) {
                    this.dialogVisibleSave = true;
                    this.save_promit_title = '上传的缩略图大小不能超过 512k!';
                    fileList.pop();
                } else {
                    this.dataForm.thumbImgFileList.push(file);
                }
                this.hideThumbUpload = fileList.length == 1;
            },
            //查看缩略图
            handleThumbImg(file){
                this.dialogVisibleThumbImg = true;
                this.dialogThumbImageUrl = file.url;
            },
            //限制缩略图数量
            handleExceedThumbImg(){
                this.dialogVisibleSave = true;
                this.save_promit_title = '只能上传1张缩略图';
            },
            //删除缩略图
            handleRemoveThumbImg(){
                this.dataForm.thumbImgFileList = [];
                this.dialogVisibleThumbImg = false;
                this.dialogThumbImageUrl = '';
                this.hideThumbUpload = false;
            }
        }
    }
</script>

<style lang="less" scoped>
.demand{
    .add_field{
        .basic_info{
            display:flex;
            .search_text{
                margin-bottom:0;
            }
            .title{
                margin-right:67px;
            }
        }
    }
}
</style>
